<template>

    <div class="line-chart" ref="chart">
    </div>

</template>

<script>
export default {
    props: {
        xdata: {
            type: Array,
            default: () => { [] }
        },
        ydata: {
            type: Array,
            default: () => { [] }
        }
    },
    data() {
        return {
            myChart: null
        }
    },
    methods: {
        getEchartData() {
            if (this.myChart === null) {
                this.myChart = this.$echarts.init(this.$refs.chart)
            }
            this.myChart.setOption({
                title: {
                    text: '数据统计',
                    left: '10%'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                },
                grid: {
                    left: '15%',
                    right: '10%',
                    bottom: '10%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:
                        this.xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: this.ydata.map(item => {
                    item.type = 'line'
                    return item
                })
            })
        }
    },
    watch: {
        xdata: {
            handler: function () {
                this.getEchartData()
            },
            deep: true
        }
    }

}
</script>

<style lang="less" scoped>
.line-chart {
    width: 100%;
    height: 100%;
}
</style>